<template>
  <!-- 关注组件 -->
  <div class="live-info-box">
    <div class="back" v-if="isShowClose"  @click="back">
      <i></i>
      <!-- <Iconfont iconClass="iconfont iconyoujiantou1 arrow" /> -->
    </div>
    <span class="title-text"> {{roomInfo.roomInfo.title }}</span>
    <div class="info-num">
      <div class="icon2"></div>
      <span class="person-num">{{ roomNum | filterNum(1) }}</span>
    </div>
    <div class="person">
      <div class="icon1"></div>
      <span>{{middleHdCount | filterNum(1) }}</span>
    </div>
    <div @click="activeTm" class="dan-mu-box">
      <div :class="[danMu]"></div>
    </div>
    <div class="collect-box">
      <div  :class="[isAttention?'colltect-live-gray':'colltect-live-red']" @click="clickHeader('attention')">
		{{isAttention?'已关注':'关注'}}
      </div>
    </div>

  </div>
</template>

<script>
  import fun from "../../../../util/function";
  import { getIsAttentionFun, cancelFollowSpecialColumn, followSpecialColumn, getFollowState } from '@/util/api.js'
  export default {
    props: {
      roomInfo: Object,
      roomNum: String, //房间人数
      socketHdCount: String,
    },
    components: {},
    data() {
      return {
        roomId: this.$route.params.roomid,
        tmShow: this.roomInfo.roomInfo.bulletScreen,
        danMu: "", //弹幕css切换  Danmu-close   Danmu-open
        middleHdCount: '', //socket留言数量
        isAttention:false,
        isShowClose:true,
      };
    },
    watch: {
      socketHdCount() {
        this.middleHdCount = this.socketHdCount
      }
    },
    filters: {
      filterNum: function(type, fixed) {
        if (typeof type == "undefined") {
          return 0
        } else if (type < 10000) {
          return type
        } else {
          return (type / 10000).toFixed(fixed) + "w";
        }
      }
    },
    async  created() {
      const source = sessionStorage.getItem('source')
			const plat = await fun.initSourcePlat()
			if(source === 'hly_mini' && plat === 'mini'){
          this.isShowClose = false;
			}  
    this.getcheckAttention();
	  fun.getIsCollect(this.roomId,'2');//是否收藏  1视频，2-房间
      if (this.tmShow == 1) { //打开弹幕
        this.danMu = "danmu-open"
      } else if (this.tmShow == 0) { //关闭弹幕
        this.danMu = "danmu-close"
      }
      this.middleHdCount = this.roomInfo.hdCount;
    },
    methods: {
      async getcheckAttention(){// 查询是否关注
        const { roomInfo: { anchor } } = this.roomInfo;
				const { roomInfo: { userAnchor: { anchorAcct } } } = this.roomInfo;
        const liveStation = this.$route.query.liveStation === '1';
				if (liveStation) {
          try {
            const res = await getFollowState(anchorAcct, 6);
            this.isAttention = res.data.data;
          } catch (error) {
            throw new Error(error)
          }
        } else {
          const isattention = await getIsAttentionFun(anchor);
					this.isAttention=isattention.data.data;
        }
			},
    clickHeader(clickType) {
			switch (clickType) {
				case 'attention':
				if (this.$store.state.isYk) { //游客
					fun.ykDisposeFun();
					return
				}
        // 是否来自直播小站
        this.$route.query.liveStation === '1' ? this.liveStationAttention() : this.isAttention = fun.LiveAttentionFun(this.isAttention,this.roomInfo.roomInfo.anchor);
				break;
				default:
				break;
			}
		},
    async liveStationAttention(){ // 直播小站关注
      const { roomInfo: { userAnchor: { anchorAcct } } } = this.roomInfo;
      if (this.isAttention) {
        try {
          const res = await cancelFollowSpecialColumn(anchorAcct, 6)
          const { code, data, msg } = res.data;
          if (code === '000000') {
            this.isAttention = false;
          } else {
            fun.toastMessage(msg);
          }
        } catch (error) {
          throw new Error(error);
        }
      } else {
        try {
          const res = await followSpecialColumn(anchorAcct, 6);
          const { code, data, msg } = res.data;
          if (code === '000000') {
            this.isAttention = true;
          } else {
            fun.toastMessage(msg);
          }
        } catch (error) {
          throw new Error(error);
        }
      }
    },
		clickCollect(){
		   if(this.$store.state.isCollect){
			   fun.setLiveCollectFun(this.roomId,'0');
		   }else{
			   fun.setLiveCollectFun(this.roomId,'1');
		   }
		},
      // 返回
      back() {
        fun.liveBackFun();
      },
      // 弹幕
      activeTm() {
        if (this.$store.state.isYk) {
          let jointUrl = fun.getCurPageUrl('live', this.$route.params.roomid);
          fun.ykDisposeFun(jointUrl);
          return
        };
        if (window.terminal.isZxyhApp) { //zxyh 未登录 调起登录
          window.bank.userInfoPlugin.isLogin((res) => {
            //console.log('zxyh res.isLogin',res.isLogin)
            if (res.isLogin) { //  true 已经登录
              this.activeTmFun();
            } else { //  false  未登录
              fun.zxyhLogin(window.location.href) //调起登录
            }
          })
        } else {
          this.activeTmFun();
        }
      },
      activeTmFun() {
        if (this.tmShow == 0) { //默认为0关闭     1 开启
          fun.toastMessage("管理员已经关闭弹幕")
        };
        if (this.tmShow == 1) { //1是开启的
          if (this.danMu == "danmu-open") { //弹幕打开
            this.danMu = "danmu-close";
            this.$emit("formChildMsg", {
              type: 'barrageOpen',
              data: '0'
            })
          } else if (this.danMu == "danmu-close") {
            this.danMu = "danmu-open";
            this.$emit("formChildMsg", {
              type: 'barrageOpen',
              data: '1'
            })
          }

        }
      },

    },
  };
</script>

<style scoped="scoped">
  .live-info-box {
    width: 100%;
    height: 70px;
    padding-right: 10px;
    /*		padding: 0 20px;*/
    background: white;
    border-bottom: 1px solid rgba(221, 221, 222, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .title span {
    line-height: 70px;
    font-size: 28px;
  }

  .back {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* transform: rotate(180deg); */
  }

  .back i {
    height: 32px;
    width: 32px;
    background: url('../../../../assets/images/zxyh/back_black.png') no-repeat;
    background-size: 100% 100%;

  }

  .title-text {
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 70px;
    line-height: 70px;
    font-size: 30px !important;
    flex: 1;
    margin-left: 20px;
    /*background: salmon;*/
  }

  .back+.title-text {
    margin-left: 0;
  }

  .info-num {
    width: 100px;
    height: 70px;
    font-size: 22px;
    margin-left: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /*background: fuchsia;*/
  }

  .icon1 {
    width: 40px;
    height: 30px;
    background: url(../../../../assets/images/icon2.png) no-repeat;
    background-size: 150px 288px;
    background-position: -56px -226px;
  }

  .icon2 {
    width: 28px;
    height: 30px;
    /*background: forestgreen;*/
    background: url(../../../../assets/images/icon2.png) no-repeat center center;
    background-size: 150px 288px;
    background-position: -30px -227px;
  }

  .person-num {
    height: 70px;
    display: inline-block;
    line-height: 70px;
  }

  .person {
    width: 100px;
    height: 70px;
    font-size: 22px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /*background: salmon;*/
  }

  .dan-mu-box {
    width: 60px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background: wheat;*/
  }


  .danmu-close {
    width: 45px;
    height: 45px;
    background: url(../../../../assets/images/yIcons.png) no-repeat;
    background-size: 400px 400px;
    background-position: -273px 0;
    display: inline-block;
  }

  .danmu-open {
    width: 45px;
    height: 45px;
    background: url(../../../../assets/images/yIcons.png) no-repeat center center;
    background-size: 400px 400px;
    background-position: -322px 0;
    display: inline-block;
  }

  .colltect-live-gray {
    width: 110px;
    height: 60px;
    background: #acacac;
    color: white;
    text-align: center;
    line-height: 60px;
    border-radius: 60px;
    font-size: 26px;
  }

  .collect-box {
    /* width: 130px; */
    margin-left: 10px;
    height: 70px;
    margin-right: 5px;
    /*background: forestgreen;*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
  }

  .colltect-live-red {
    width: 110px;
    height: 60px;
    background: rgb(204, 53, 56);
    color: white;
    text-align: center;
    line-height: 60px;
    border-radius: 60px;
    font-size: 26px;
  }

  .arrow {
    font-size: 30px;
    /*background: salmon;*/
  }
</style>
